<template>
  <v-content >
    <div class="mw-column-style" style="background-color: #ffffff;margin-bottom:0.79rem;padding:.2rem .15rem;" v-vuet-scroll="{ path: 'addresslist', name: 'content' }">
      <div style="text-align:center;">更多话题</div>
      <div class="mw-row-spacebetween-style" style="align-items:center;height:0.44rem;align-items: center;width:100%; background-color: #FFffff;">
        <div class="mw-active-rectangle-button " style="box-shadow:0px 0.04rem 0.1rem 0px rgba(234,234,234,0.53);border-radius:0.08rem;border:1px solid rgba(222,222,222,1);width:100%;height:0.34rem;border-radius: 0.17rem;background-color:#ffffff;justify-content: flex-start">
          <img src="/static/search_icon.png" style="height:0.14rem;width:0.14rem;margin-right: 0.1rem"/>
          <div style="font-size:0.15rem;" class="mw-main-yellow ">搜索话题</div>
        </div>
      </div>
      <div class="mw-flex flex-jc-b p-t-16 p-b-20">
          <div class="btn_info" :class="{active:curIndex == index }" v-for="(item,index) in recommendTopic" :key="index"
          @click="chooseTopic(index)">
          {{item.name}}</div>
      </div>
      <div class="topic_list">
        <div class="topic_item m-b-19" v-for="(item,index) in topicList" :key="index" @click="goDetail(item.id)">
          <div class="topic_img"><img :src="item.cover_url" alt=""></div>
            <div class="topic_info m-l-6">
              <h4 class="fz-18 c-333">{{item.title}}</h4>
              <div class="fz-12 c-b3 m-t-10">{{item.note_number}}回答</div>
            </div>
        </div>
      </div>
    </div>
  </v-content>
</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'
  import router from '../../router'

  export default {
    mixins: [
      // mapModules({data: 'addresslist'}),
      // mapRules({store: [{ path: 'addresslist' }],need: [{ path: 'addresslist' }]}),
    ],
    components: {

    },
    data() {
      return {
        curIndex:0,
        topicList:[],
        recommendTopic:[
          {
            id:1,
            name:'推荐'
          },{
            id:11,
            name:'推荐'
          },{
            id:13,
            name:'推荐'
          },{
            id:16,
            name:'推荐'
          },{
            id:18,
            name:'推荐'
          }
        ]
      }
    },
    methods: {
      getHotTopic(){
        var that = this;
        httputil.request("topic/hots", {}, function (successresult) {
          console.log(successresult)
          that.topicList = successresult.topic_list;
        }, function (errorresult) {
          if (type == "down") {
            done();
          }
        }, "GET", false, "")
      },
      chooseTopic(i){
        this.curIndex = i;
      },
      goDetail(id){
        this.$router.push({ name: 'topicDetail', query: {id: id}})
      }
    },

    created() {
      
    },

    mounted() {
      this.getHotTopic();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "../../assets/styles/base.less";
.zxlybtn2 {
  color: green;
}
.btn_default {
  width: 0.5rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
}
.btn_info {
  /* flex: 1 0 25%; */
  outline: 0;
  color: #333;
  width: 0.66rem;
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #f2f2f2;
  border: 0;
  border-radius: 0.3rem;
}
.btn_info.active {
  background-color: #ffd012;
}
.topic_item{
  display: flex;
  width: 100%;
  .topic_img{
    width: .44rem;
    height: .44rem;
    background-color: #f2f2f2;
    border-radius: .1rem; 
    overflow: hidden;
    img{
        width: 100%;
    }
  }
}
</style>
